<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="HYL">
    <title></title>
    <style>
        ul{
            list-style: none;
        }
    main{
        width: 500px;
        height:800px;
        margin:50px auto;
        border:1px red solid ;
        /* position: relative; */
    }
    div{
        width:400px;
        height: 550px;
        margin:5px auto;
        border:5px solid gray;
        background-image:url(遮罩层.jpg);
        background-size: 100% 100%;
    }
    ul{
        display: flex;
    }
    .one{
        
        width: 200px;
        height: 200px;
        border: 1px  solid red;
        margin:3px;
        background-image:url(遮罩层.jpg);
        background-size: 100% 100%;
         overflow: hidden; 
        position: relative;
    }
    .two{
        width: 200px;
        height: 200px;
        border: 1px  solid red;
        margin:3px;
        background-image:url(遮罩层.jpg);
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;

    }
    .section_1{
        width:200px;
        height: 200px;
        font-size: 30px;
        color:white;
        position: absolute;
        top:0px;
        left:-200px;
        text-align: center;
    }
   .section_2{
        width:200px;
        height: 200px;
        font-size: 30px;
        color:white;
        position: absolute;
        top:0px;
        left:-200px;
        text-align:center;
    }
    .yellow{
        border:5px solid yellow;
    }
    </style>
</head>
<body>
    <main>
        <div class="yellow">
        </div>
        <ul>
            <li class="one"><section class="section_1">html<br>css<br>js</section></li>
            <li class="two"> <section class="section_2">html<br>css<br>js</section></li>
        </ul>
    </main>
<script src="Jquery.js"></script>
</body>
</html>
    <script>
    $('.one').hover(function(){
        $('.section_1').stop().animate({
            left:0
        },1000);
        $('.one').animate({
            opacity:0.3
        },1000)
    },function(){
        $('.section_1').stop().animate({
            left:-200
        },1000);
        $('.one').animate({
            opacity:1
        },1000)
    })
    // //////////////////////
     $('.two').hover(function(){
        $('.section_2').stop().animate({
            left:0
        },1000);
        $('.two').animate({
            opacity:0.3
        },1000);
    },function(){
        $('.section_2').stop().animate({
            left:-200
        },1000);
        $('.two').animate({
            opacity:1
        },1000)
    })
    $('div').hover(function(){
        $('div').addClass('yellow');
    },function(){
        $('div').removeClass('yellow');
    })
   </script>